<template>
  <div style="height: 100%;">
    <a-menu style="width: 190px;height: 100%" :selectedKeys="selectedKeys" mode="inline" @click="handleClick">
      <a-menu-item-group key="g1">
        <template slot="title"><span>流程分类</span> </template>
        <a-menu-item v-for="item in list" :key="item.id">
          {{ item.name }}
        </a-menu-item>
      </a-menu-item-group>
    </a-menu>
  </div>
</template>
<script>

import { list } from '@/api/category'
export default {
  name: 'CategoryMenu',
  data() {
    return {
      list: [],
      selectedKeys: []
    }
  },
  mounted() {
  },
  created() {
    this.loadData()

    this.$bus.on('load-category', this.loadData)
  },
  beforeDestroy() {
    this.$bus.off('load-category')
  },
  methods: {
    loadData() {
      list().then(res => {
        this.list = res.data
        if (this.list && this.list.length > 0) {
          const item = this.list[0]
          this.handleClick({ item, key: item.id, keyPath: '' })
        }
      })
    },
    handleClick({ item, key, keyPath }) {
      this.selectedKeys = [key]
      this.$emit('click', key)
    }
  }
}
</script>
